<template>
	<section class="container book_list">
		<no-data v-if="isNoData" ></no-data>
		<van-list v-model="loading" :finished="finished" @load="init"  v-else>
		  	<div class="bookItem" v-for="(blockBook,bIndex) in blockBookList" :key="bIndex" @click="gotoBookDetail(blockBook.book.id)" >
				<div class="list_l">
					<!--<img :src="blockBook.book.cover" v-if="blockBook.book.cover && blockBook.book.cover!=null"/>-->
					<img v-lazy="blockBook.book.cover" v-if="blockBook.book.cover && blockBook.book.cover!=null"/>
					<img src="/images/shuimg.jpg" v-else/>
				</div>
				<div class="list_r">
					<h3>{{blockBook.book.title}}</h3>
					<p>{{blockBook.book.recommendation}}</p>
					<span><van-icon name="yanjing" size="1.2rem" style="vertical-align: bottom;"/> </span> <span> {{blockBook.book.pv}} </span>
				</div>
			</div>
		</van-list>
		<transition name="router-slid" mode="out-in">
		  <router-view></router-view>
		</transition>
	</section>
</template>
<script >
	import {List, Icon, Toast,Cell} from 'vant'
	import {getBlockBookList} from '../../api/book'
	import noData from './noData'
	export default {
		components: {[List.name]: List, [Icon.name]: Icon, [Toast.name]: Toast, [Cell.name]: Cell,
			noData},
		data() {
			return {
				blockBookList: [],
				loading: false,
				finished: false,
				params:{
					blockId:'',
					page: {page: 1, pageSize: 6},
					sort: {order: null, sort: null}
				},
				isNoData:false,
			}
		},
		methods: {
			gotoBookDetail(id){
				this.$router.push({name: 'BookDetail',query:{id:id}});
			},
			async init() {
				let resp = await getBlockBookList(this.params);
				if(this.qUtil.validResp(resp)){
					if(resp.data.total <= 0){
						this.isNoData = true;
						return false;
					}
					let list = resp.data.templateBlockBookList;
					if(list && list.length >0){
						list.map((e,i)=>{
							this.blockBookList.push(e);
						});
						this.params.page.page ++;
					}
				}
				this.loading = false;
				if(this.blockBookList.length >=resp.data.total){
					this.finished = true;
				}
			},
		},
		mounted(){
			this.params.blockId = this.$route.query.blockId || 0;
			let title= this.$route.query.title || '书籍列表';
			this.$store.dispatch("UpdateNavbarTitle",title);
		}
	}
</script>
<style scoped>
.book_list{
	background: #fff; 
	min-height: 100%;
}
.book_list .van-list{
	padding: 0.8rem 1rem 4rem 1rem;
}
</style>